import React from 'react';
import MapForm from '@/components/MapFormComponent';
import { FormComponentProps } from 'antd/lib/form';
import { DeviceTypeItem, ConnectState } from '@/models/connect';
import { connect } from 'dva';
import _ from 'lodash';
import { Select } from 'antd';
import { DeviceInfo, DynamicFormType } from '@/models/device';

const { CstInput, CstSelect } = MapForm;

interface OtherFormProps {
  onCreate: (form?: FormComponentProps['form']) => void;
  dynamicForms: DynamicFormType[];
  deviceInfo: DeviceInfo;
  extendedField: []
}

const OtherForm: React.FC<OtherFormProps> = ({ onCreate, dynamicForms, deviceInfo, extendedField }) => {
  console.log(extendedField,20)
  const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
  };
  return (
    <MapForm onCreate={onCreate}>
      {!!extendedField && (
        <>
          {_.map(extendedField, (item: DynamicFormType, index: number) => {
            const data = JSON.parse(deviceInfo.extendedField || JSON.stringify({}));
            if (item.type === 'textfield') {
              return (
                <CstInput
                  key={index}
                  formItemLayout={formItemLayout}
                  defaultValue={data[item.fieldName]}
                  label={item.label}
                  name={item.fieldName}
                />
              );
            }
            if (item.type === 'singleSelect') {
              return (
                <CstSelect
                  key={index}
                  formItemLayout={formItemLayout}
                  label={item.label}
                  name={item.fieldName}
                  defaultValue={data[item.fieldName]}
                >
                  {_.map(item.singleOption, (o, index) => (
                    <Select.Option key={index} value={o.itemValue}>
                      {o.itemName}
                    </Select.Option>
                  ))}
                </CstSelect>
              );
            }
            return <>/</>;
          })}
        </>
      )}
      {/* {dynamicForms && (
        <>
          {_.map(dynamicForms, (item: DynamicFormType, index: number) => {
            const data = JSON.parse(deviceInfo.extendedField || JSON.stringify({}));
            if (item.type === 'textfield') {
              return (
                <CstInput
                  key={index}
                  formItemLayout={formItemLayout}
                  defaultValue={data[item.fieldName]}
                  label={item.label}
                  name={item.fieldName}
                />
              );
            }
            if (item.type === 'singleSelect') {
              return (
                <CstSelect
                  key={index}
                  formItemLayout={formItemLayout}
                  label={item.label}
                  name={item.fieldName}
                  defaultValue={data[item.fieldName]}
                >
                  {_.map(item.singleOption, (o, index) => (
                    <Select.Option key={index} value={o.itemValue}>
                      {o.itemName}
                    </Select.Option>
                  ))}
                </CstSelect>
              );
            }
            return <>/</>;
          })}
        </>
      )} */}
    </MapForm>
  );
};

export default connect(({ device }: ConnectState) => {
  const { deviceTypeNoOptions, selectDeviceTypeNo } = device;
  const typeOptionItem: DeviceTypeItem = _.find(
    deviceTypeNoOptions,
    item => item.deviceTypeNo === selectDeviceTypeNo,
  );
  const dynamicForms: DynamicFormType = JSON.parse(
    (typeOptionItem && typeOptionItem.extendedField) || '[]',
  );
  return {
    dynamicForms,
  };
})(OtherForm);
